<template>
	<div>
		<FormItem label="类型" single>
			<Radio v-model="moreSpec" :datas="[{name:'单规格',id:false},{name:'多规格',id:true}]"></Radio>
		</FormItem>
		<div v-if="moreSpec">
			<FormItem label="设置" single>
				<div class="h-input-group" v-for="(item, index) in specList" :key="index">
					<span class="h-input-addon">规格名称</span>
					<input type="text" style="max-width:120px;" placeholder="规格名称" v-model="item.name" />
					<Button size="s" color="red" @click="delSpec(index)">x</Button>
					<span class="h-input-addon">规格属性</span>
					<template v-for="(vitem,vindex) in item.values">
						<input type="text" placeholder="规格属性" v-model="item.values[vindex]" />
						<Button size="xs" text-color="red" @click="delAttr(index,vindex)">x</Button>
					</template>
					<Button size="s" color="green" @click="addAttr(index)">+</Button>
				</div>
				<Button color="primary" @click="addSpec">添加规格</Button>
			</FormItem>
			<FormItem label="批量" single>
				<div class="h-input-group">
					<span class="h-input-addon">销售价(元)</span>
					<input type="text" placeholder="请输入销售价" v-model="unite.price" />
					<span class="h-input-addon">划线价(元)</span>
					<input type="text" placeholder="请输入划线价" v-model="unite.oldprice" />
					<span class="h-input-addon">库存</span>
					<input type="text" placeholder="请输入库存" v-model="unite.stock" />
					<Button color="primary" @click="uniteSet">批量设置</Button>
				</div>
			</FormItem>
			<FormItem label="列表" single>
				<Table :loading="loading" :datas="specDatas">
					<TableItem :width="150" v-for="(sitem, sindex) in specList" :key="sindex" :title="sitem.name" align="center">
						<template slot-scope="{data}">
							<span v-if="data.attr" :class="'h-tag '+ $global.tagColor[sindex%4]">{{data.attr[sindex]}}</span>
						</template>
					</TableItem>
					<TableItem title="销售价(元)" align="center">
						<template slot-scope="{data}">
							<input type="text" placeholder="请输入销售价" v-model="data.price" />
						</template>
					</TableItem>
					<TableItem title="划线价(元)" align="center">
						<template slot-scope="{data}">
							<input type="text" placeholder="请输入划线价" v-model="data.oldprice" />
						</template>
					</TableItem>
					<TableItem title="库存" align="center">
						<template slot-scope="{data}">
							<input type="text" placeholder="请输入库存" v-model="data.stock" />
						</template>
					</TableItem>
				</Table>
			</FormItem>
		</div>
		<div v-else>
			<FormItem label="设置" single>
				<div class="h-input-group">
					<span class="h-input-addon">销售价(元)</span>
					<input type="text" placeholder="请输入销售价" v-model="specDatas[0].price" />
					<span class="h-input-addon">划线价(元)</span>
					<input type="text" placeholder="请输入划线价" v-model="specDatas[0].oldprice" />
					<span class="h-input-addon">库存</span>
					<input type="text" placeholder="请输入库存" v-model="specDatas[0].stock" />
				</div>
			</FormItem>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			spec: Array,
			specData: Array
		},
		data() {
			return {
				loading: false,
				unite: {},
				moreSpec: false,
				specList: [],
				specListChange: false,
				specDatas: [{price:'',oldprice:'',stock:''}]
			}
		},
		watch: {
			specData (value) {
				if(value && value.length > 0){
					this.specDatas = value
				}
			},
			spec (value) {
				if(value && value.length > 0){
					this.specList = value
					this.moreSpec = true
				}
			},
			specList: {
				handler(newValue, oldValue) {
					if(this.specListChange){
						this.upSpecDatas()
						this.specListChange = false
					}else{
						this.upSpecDatas('refresh')
					}
				},
				deep: true
			}
		},
		methods: {
			addSpec() {
				this.specList.push({
					name: '',
					values: ['']
				})
				this.specListChange = true
			},
			delSpec(index) {
				this.specList.splice(index, 1)
				this.specListChange = true
			},
			addAttr(index) {
				this.specList[index].values.push('')
				this.specListChange = true
			},
			delAttr(index, vindex) {
				this.specList[index].values.splice(vindex, 1)
				this.specListChange = true
			},
			uniteSet() {
				this.specDatas.forEach((v) => {
					v.price = this.unite.price
					v.oldprice = this.unite.oldprice
					v.stock = this.unite.stock
				})
			},
			upSpecDatas(action='add') {
				let attrs = []
				this.specList.forEach((v) => {
					attrs.push(v.values)
				})
				let specDatas = []
				this.descartes(attrs).forEach((vv,kk) => {
					if(action == 'refresh'){
						specDatas.push({price:this.specDatas[kk].price,oldprice:this.specDatas[kk].oldprice,stock:this.specDatas[kk].stock,attr: vv})
					}else{
						specDatas.push({price: '',oldprice: '',stock: '',attr: vv})
					}
				})
				this.specDatas = specDatas
			},
			descartes(array) {
				if (array.length < 2){
					let ret = []
					array[0].forEach(v=>{
						ret.push([v])
					})
					return ret
				}
				return [].reduce.call(array, (col, set) => {
					let res = []
					col.forEach((c) => {
						set.forEach((s) => {
							let t = [].concat(Array.isArray(c) ? c : [c])
							t.push(s)
							res.push(t)
						})
					})
					return res
				})
			}
		}
	}
</script>

<style lang="less">
	.h-input-group {
		margin: 5px 0;
	}
</style>
